// createContext是一个方法，用于做跨组件传参
import React, { Component } from "react";
import Child3 from "./Child3";
// import { Provider, Consumer } from "./context";
import context from "./context";

// const { Provider, Consumer } = createContext();
//       提供者     消费者
// Provider用在父组件的最外面, 必须要有一个value属性
// Consumer组件中间写函数，函数接收一个value作为参数，返回jsx

// 具有响应式

class Child2 extends Component {
  render() {
    return (
      <>
        <div>child2</div>
        <Child3 />
      </>
    );
  }
}

class Child1 extends Component {
  render() {
    return (
      <>
        <context.Consumer>
          {(value) => {
            return <div>child1 - {value.count}</div>;
          }}
        </context.Consumer>
      </>
    );
  }
}

class App extends Component {
  state = {
    count: 10,
  };

  fn = () => {
    this.setState({
      count: 20,
    });
  };

  render() {
    return (
      <context.Provider
        value={{
          count: this.state.count,
        }}
      >
        <h3>
          context跨组件传参 - {this.state.count} -{" "}
          <button onClick={this.fn}>btn</button>
        </h3>
        <Child1 />
        <Child2 />
      </context.Provider>
    );
  }
}

export default App;
